<template>
  <div style="height: 100%" class="workspace">
    <el-container ref="listWarp" style="height: 100%; background-color: #fff">
      <el-header class="toolbar-wap" style="height: 45px">
        <el-row
          :gutter="20"
          style="height: 100%; display: flex; align-items: center"
        >
          <el-col :span="5">
            <el-date-picker
              size="small"
              v-model="dateData"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              @change="changeDate"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
          <el-col :span="3">
            <div class="colTitle">学院名称:</div>
            <el-select
              size="small"
              v-model="manageCollegeId"
              clearable
              style="width: 140px"
              placeholder="请选择学院名称"
              @change="setManageCollegeId"
            >
              <el-option
                v-for="item in manageCollegeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <div class="colTitle">班级名称:</div>
            <el-select
              size="small"
              v-model="classId"
              clearable
              style="width: 140px"
              placeholder="请选择班级名称"
              @change="setClassId"
            >
              <el-option
                v-for="item in classList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <div class="colTitle">楼宇名称:</div>
            <el-select
              size="small"
              v-model="manageBuildingId"
              clearable
              style="width: 140px"
              filterable
              placeholder="请选择楼宇名称"
              @change="setManageBuilding"
            >
              <el-option
                v-for="item in manageBuildingList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <div class="colTitle">楼层:</div>
            <el-select
              size="small"
              v-model="floorId"
              clearable
              style="width: 150px"
              placeholder="请选择楼层名称"
              @change="setFloorId"
            >
              <el-option
                v-for="item in floorList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <div class="colTitle">学号/姓名搜索:</div>
            <el-input
              size="small"
              placeholder="请输入学号/姓名"
              v-model="searchValue"
              clearable
              style="width: 180px"
              @change="search"
            ></el-input>
          </el-col>
          <el-col :span="3">
            <div class="colTitle">预警原因:</div>
            <el-select
              size="small"
              v-model="warnReasonName"
              clearable
              style="width: 140px"
              placeholder="请选择预警原因"
              @change="setFloorId"
            >
              <el-option
                v-for="item in warnReasonList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-header>
      <el-main style="height: 100%" class="page-main">
        <div class="content" style="height: calc(100% - 60px)">
          <el-table
            :data="tableData"
            height="100%"
            style="width: 100%"
            v-loading="loadIng"
            :default-sort="{ prop: 'passTime', order: 'descending' }"
          >
            <el-table-column
              type="index"
              label="序号"
              width="50"
            ></el-table-column>
            <el-table-column
              prop="account"
              label="学号"
              width="130"
            ></el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="collegeName"
              label="学院"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="className"
              label="班级"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="buildingName"
              label="楼宇"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="roomName"
              label="房间"
              width="100"
              sortable
            ></el-table-column>
            <el-table-column
              prop="passTime"
              label="通过时间"
              width="160"
              sortable
            ></el-table-column>
            <el-table-column
              prop="createTime"
              label="记录时间"
              width="160"
              sortable
            ></el-table-column>
            <el-table-column
              prop="passInOut"
              label="进出"
              width="80"
            ></el-table-column>
            <el-table-column
              prop="dReason"
              label="预警原因"
              width="100"
            ></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
          </el-table>
          <el-footer
            style="height: 45px; background-color: #fff"
            class="page-footer"
          >
            <el-pagination
              style="padding-top: 10px"
              background
              layout="prev, pager, next,jumper,total,sizes"
              @size-change="evtPageSizeChange"
              @current-change="evtPageCurrentChange"
              :current-page.sync="currentPage"
              :page-sizes="[20, 50, 100, 500]"
              :total="totalRows"
            ></el-pagination>
          </el-footer>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { apiLateRecord } from "@/api/basicData/lateRecord";

export default {
  data() {
    return {
      loading: false,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      dateData: [],
      searchValue: "",
      manageCollegeId: "",
      manageBuildingId: "",
      warnReasonName: "",
      tableData: [],
      manageBuildingList: [],
      manageCollegeList: [],
      warnReasonList: [],
      loadIng: false,
      currentPage: 1,
      totalRows: 0,
      pageSize: 20,
      classList: [],
      floorList: [],
      classId: "",
      floorId: "",
    };
  },
  methods: {
    changeDate() {
      this.getNotOutRecordList(this.dateData[0], this.dateData[1]);
    },
    search() {
      this.getNotOutRecordList(this.dateData[0], this.dateData[1]);
    },
    getNotOutRecordList(startDate, endDate) {
      this.loadIng = true;
      let search = [];
      search.push({
        andOr: "and",
        searchField: "createTime",
        operator: ">=",
        searchValue: startDate,
      });
      search.push({
        andOr: "and",
        searchField: "createTime",
        operator: "<=",
        searchValue: endDate,
      });
      if (/^\d+(\.\d+)?$/.test(this.searchValue) && this.searchValue) {
        search.push({
          andOr: "and",
          searchField: "account",
          operator: "=",
          searchValue: this.searchValue,
        });
      } else if (this.searchValue) {
        search.push({
          andOr: "in",
          searchField: "name",
          operator: "=",
          searchValue: this.searchValue,
        });
      }
      if (this.manageBuildingId) {
        search.push({
          andOr: "and",
          searchField: "buildingId",
          operator: "=",
          searchValue: this.manageBuildingId,
        });
      }
      if (this.manageCollegeId) {
        search.push({
          andOr: "and",
          searchField: "collegeId",
          operator: "=",
          searchValue: this.manageCollegeId,
        });
      }
      if (this.classId) {
        search.push({
          andOr: "and",
          searchField: "classId",
          operator: "=",
          searchValue: this.classId,
        });
      }
      if (this.floorId) {
        search.push({
          andOr: "and",
          searchField: "floor",
          operator: "=",
          searchValue: this.floorId,
        });
      }
      // if (this.warnReasonName) {
      //   search.push({
      //     andOr: "and",
      //     searchField: "deleteReason",
      //     operator: "=",
      //     searchValue: this.warnReasonName,
      //   });
      // }
      if (this.warnReasonName) {
        search.push({
          andOr: "and",
          searchField: "dReason",
          operator: "=",
          searchValue: this.warnReasonName,
        });
      }
      let page = { pageIndex: this.currentPage, pageSize: this.pageSize };
      apiLateRecord
        .getWarningHandleList(
          JSON.stringify(search),
          JSON.stringify(page),
          "createTime desc"
        )
        .then((res) => {
          if (res.errorCode === 0) {
            this.tableData = res.data.rows;
            this.totalRows = res.data.total;
            this.loadIng = false;
          }
        });
    },
    evtPageSizeChange(val) {
      //每页数量
      this.pageSize = val;
      this.getNotOutRecordList(this.dateData[0], this.dateData[1]);
    },
    evtPageCurrentChange(val) {
      //分页
      this.currentPage = val;
      this.getNotOutRecordList(this.dateData[0], this.dateData[1]);
    },
    getAuthList(type) {
      apiLateRecord.getAuthList(type).then((res) => {
        if (res.errorCode === 0) {
          if (type == 1) {
            // 楼宇
            this.manageBuildingList = res.data;
          } else if (type == 2) {
            // 学院
            this.manageCollegeList = res.data;
          } else if (type == 3) {
            // 班级
            this.classList = res.data;
          }
        }
      });
    },
    getWarnReasonList() {
      let search = [
        {
          andOr: "and",
          searchField: "dictionaryId",
          operator: "=",
          searchValue: "yjclyy",
        },
      ];
      apiLateRecord.getWarnReasonList(JSON.stringify(search)).then((res) => {
        if (res.errorCode === 0) {
          this.warnReasonList = res.data;
        }
      });
    },
    setManageBuilding() {
      //生成楼层
      this.manageBuildingList.forEach((item) => {
        if (item.id == this.manageBuildingId) {
          for (let i = item.downFloor; i <= item.upFloor; i++) {
            this.floorList.push({ name: i, id: i });
          }
        }
      });
      this.getNotOutRecordList(this.dateData[0], this.dateData[1]);
    },
    setManageCollegeId() {
      this.getNotOutRecordList(this.dateData[0], this.dateData[1]);
    },
    setClassId() {
      this.getNotOutRecordList(this.dateData[0], this.dateData[1]);
    },
    setFloorId() {
      this.getNotOutRecordList(this.dateData[0], this.dateData[1]);
    },
  },
  created() {
    //昨天的时间
    let time = new Date().getTime() - 24 * 60 * 60 * 1000;
    let yesterday = new Date(time);
    let beforeDay =
      yesterday.getFullYear() +
      "-" +
      (yesterday.getMonth() > 9
        ? yesterday.getMonth() + 1
        : "0" + (yesterday.getMonth() + 1)) +
      "-" +
      (yesterday.getDate() > 9
        ? yesterday.getDate()
        : "0" + yesterday.getDate());
    //今天的时间
    let myDate = new Date(); //获取当前年份(2位)
    let year = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
    let month = myDate.getMonth(); //获取当前月份(0-11,0代表1月)
    let day = myDate.getDate(); //获取当前日(1-31)
    let defaultDate =
      year +
      "-" +
      (month + 1 > 9 ? month + 1 : "0" + (month + 1)) +
      "-" +
      (day > 9 ? day : "0" + day);
    this.dateData[0] = "" + beforeDay;
    this.dateData[1] = "" + defaultDate;
    this.getNotOutRecordList(this.dateData[0], this.dateData[1]);
    this.getAuthList(1);
    this.getAuthList(2);
    this.getAuthList(3);
    this.getWarnReasonList();
  },
};
</script>
<style scoped>
.colTitle {
  display: inline-block;
  margin-right: 10px;
  line-height: 34px;
}
</style>